<template>
	<!-- 获取的积分，下单的订单详情 -->
	<view class="score-detail-view">
		
		<!-- 基础信息 -->
		<view class="order-bewtten">
			<view class="dh-value">订单号：{{code}}</view>
			<view class="status-zq">已完成</view>
		</view>
		<view class="carName">{{store.userInfo.carName}}</view>
		
		<!-- 订单列表 -->
		<view class="product-continar">
			<view  v-for="(item,index) in orderDeatilList" :key="index"> 
			
			<view v-if="index <= 1" class="pro-item" style="display: flex;">
				<image v-if='item.attachment' class="logo" :src="item.attachment"> </image>
				<image v-else class="logo" src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/public/goods/goods_defau.png"> </image>
				<view class="rg-content">
					<view style="display: flex;">
						<view class="tab-bq tab-bq-yellow">
							<text v-if="item.itemType === 0">单品</text>
							<text v-if="item.itemType === 1">套餐</text>
						</view>
						<view class="po-title">
							{{item.goodsName}}
						</view>
					</view>
					<view class="pro-info">
						{{item.flavor || '暂无'}}
					</view>
					<view class="pro-count-bewtten">
						<view class="" style="display: flex;">
							<view class="pro-price">
								￥{{item.vipPrice}}
							</view>
							<view class="pro-no-price">
								￥{{item.salePrice}}
							</view>
						</view>
						<view class="pro-count">
							x{{item.orderQty || 0}}
						</view>
					</view>
				</view>
			</view> 
			  
			<view v-if="index > 1 && showAll" class="pro-item" style="display: flex;">
			  	<image v-if='item.attachment' class="logo" :src="item.attachment"> </image>
			  	<image v-else class="logo" src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/public/goods/goods_defau.png"> </image>
			  	<view class="rg-content">
			  		<view style="display: flex;">
			  			<view class="tab-bq tab-bq-yellow">
			  				<text v-if="item.itemType === 0">单品</text>
							<text v-if="item.itemType === 1">套餐</text>
			  			</view>
			  			<view class="po-title">
			  				{{item.goodsName}}
			  			</view>
			  		</view>
			  		<view class="pro-info">
			  			{{item.flavor || '暂无'}}
			  		</view>
			  		<view class="pro-count-bewtten">
			  			<view class="" style="display: flex;">
			  				<view class="pro-price">
			  					￥{{item.vipPrice}}
			  				</view>
			  				<view class="pro-no-price">
			  					￥{{item.salePrice}}
			  				</view>
			  			</view>
			  			<view class="pro-count">
			  				x{{item.orderQty || 0}}
			  			</view>
			  		</view>
			  	</view>
			</view>   
				
			</view>
			<view v-if="orderDeatilList.length > 2" class="zk-center-flex" @click="toggleList">
				<view class="zk-title">
					{{toggleButtonText}}
				</view>
				<image class="zk-icon" src="https://oss.jtmckj.com/wmp/jfsc/pay/bt-arro.png" mode=""></image>
			</view>
		</view>
		
		<!-- 支付信息 -->
		<view class="xd-continar">
			<view class="xd-conti-pd">
				<view class="xd-bewtten">
					<view class="label">
						下单时间
					</view>
					<view class="value">
						{{orderPayModal.orderTime}}
					</view>
				</view>
				<view class="xd-bewtten">
					<view class="label">
						订单金额
					</view>
					<view class="value">
						￥{{orderPayModal.orderAmt}}
					</view>
				</view>
				<view class="xd-bewtten">
					<view class="label">
						优惠金额
					</view>
					<view class="value" style="color:#FF3333 ;">
						￥{{orderPayModal.discountAmt || 0}}
					</view>
				</view>
				<view class="xd-bewtten">
					<view class="label">
						支付时间
					</view>
					<view class="value">
						{{orderPayModal.payTime}}
					</view>
				</view>
				<view class="xd-bewtten">
					<view class="label">
						支付方式
					</view>
					<view class="value"> 
						{{orderPayModal.payType}}
					</view>
				</view>
			</view>
			
			<!-- 支付汇总统计 -->
			<view class="bot-price-infobox">
				<view class="rg-end-flex">
					<view class="bot-yh-rgflex">
						<view class="yh-label">
							已优惠：
						</view>
						<view class="yh-value">
							￥{{orderPayModal.discountAmt}}
						</view>
					</view>
					<view class="bot-yh-rgflex">
						<view class="yh-label">
							支付金额：
						</view>
						<view class="yh-value">
							￥{{orderPayModal.paySum}}
						</view>
					</view>
				</view>
				
				<!-- 可能是组合形式 会员卡+微信支付的  目前只有会员卡支付 -->
				<view v-if="orderPayModal?.payList" class="rg-end-flebtb" style="margin: 20rpx 0 13rpx 0;">
					<view class="bot-yh-rgflex">
						<view class="yh-label">
							会员卡：
						</view>
						<view class="yh-value">
							￥{{orderPayModal.payList[0].payAmt}}
						</view>
					</view>
				</view>
				<!-- <view class="rg-end-flebtb">
					<view class="bot-yh-rgflex">
						<view class="yh-label">
							微信：
						</view>
						<view class="yh-value">
							￥39.89
						</view>
					</view>
				</view> -->
			</view>
			
		</view>
	</view>
</template>
<script setup>
	import { goodsPublic } from '@/pagesPointShop/api/goods.js';
	import { onLoad, onUnload, onReachBottom, onPullDownRefresh, onShow, onHide, onPageScroll } from '@dcloudio/uni-app';
	import { ref, reactive } from 'vue';
	import { useUserStore } from '@/store/user.js';
	const store = useUserStore();


	const code = ref('')
	const orderDeatilList = ref([])
	const orderPayModal = ref({})

	onLoad((options) => {
		code.value = options.code
		initData()
	});
	onShow(() => {

	});

	// 获取订单商品详情信息
	const initData = () => { 
		let modal = {
			"functionName": "GetConsumeOrderDetail",
			"orgCode": store.pipelineInfo.orgCode,
			"contentData": {
				"referCode": code.value,
				"memberCode": store.userInfo.code
			}
		}
		goodsPublic(modal).then(res => {
			console.log('orderDetail', res)
			if (res.opFlag !== '1') {
				return
			}
			orderDeatilList.value = res.content.rowData.orderList
			orderPayModal.value = res.content.rowData
		})
	}  
	const showAll = ref(false)
	const toggleButtonText = ref('展开全部')
	// 计算属性
	// const visibleItems = computed(() => {
	// 	if (showAll.value) {
	// 		return list;
	// 	} else {
	// 		return list.value.slice(0, 2);
	// 	}
	// });
	// 方法
	function toggleList() {
		showAll.value = !showAll.value;
		toggleButtonText.value = showAll.value ? '收起' : '展开全部';
	}
</script>
<style scoped lang="less"> 
	.score-detail-view {
		padding: 20rpx 24rpx 24rpx 24rpx;
		height: 100%;
		background-color: #f2f2f2;
	}
	
	.carName{
		height: 40rpx;font-family: PingFang SC;font-weight: 500;font-size: 24rpx;color: #666666;line-height: 40rpx;
	}

	.order-bewtten {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.order-bewtten .dh-value {
		font-weight: 500;
		font-size: 28rpx;
		color: #212121;
	}

	.order-bewtten .status-zq {
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
	}

	.product-continar {
		padding: 40rpx 24rpx 35rpx 24rpx;
		margin-top: 32rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.product-continar .pro-item {
		margin-top: 40rpx;
	}

	.product-continar .pro-item .logo {
		width: 120rpx;
		height: 120rpx;
	}

	.product-continar .pro-item .rg-content {
		flex: 1;
		margin-left: 22rpx;
	}

	.product-continar .pro-item .rg-content .tab-bq {
		width: 80rpx;
		height: 36rpx;
		border-radius: 4rpx;
		text-align: center;
		line-height: 36rpx;
	}

	.product-continar .pro-item .rg-content .tab-bq-yellow {
		background: #FFF6E5;
		color: #FFAA00;
	}

	.product-continar .pro-item .rg-content .tab-bq-green {
		background: #E5FFF6;
		color: #2BD99F;
	}

	.product-continar .pro-item .rg-content .po-title {
		margin-left: 11rpx;
	}

	.product-continar .pro-item .rg-content .pro-info {
		margin-top: 16rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
	}

	.product-continar .pro-item .rg-content .pro-price {
		font-weight: 500;
		font-size: 36rpx;
		color: #212121;
	}

	.product-continar .pro-item .rg-content .pro-no-price {
		margin-left: 12rpx;
		padding-top: 10rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
	}

	.product-continar .pro-item .rg-content .pro-count {
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
	}

	.product-continar .pro-item .rg-content .pro-count-bewtten {
		display: flex;
		justify-content: space-between;
	}

	.zk-center-flex {
		margin-top: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.zk-center-flex .zk-title {
		font-weight: 500;
		font-size: 26rpx;
		color: #FF6A00;
	}

	.zk-center-flex .zk-icon {
		width: 24rpx;
		height: 15rpx;
		margin-left: 12rpx;
	}

	.xd-continar {
		margin-top: 20rpx;
		padding-bottom: 40rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.xd-continar .xd-conti-pd {
		padding: 8rpx 21rpx 0 24rpx;
	}

	.xd-continar .xd-bewtten {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.xd-continar .xd-bewtten .label {
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
	}

	.xd-continar .xd-bewtten .value {
		font-weight: 500;
		font-size: 28rpx;
		color: #212121;
	}

	.xd-continar .bot-price-infobox {
		margin-top: 40rpx;
		border-top: 1rpx solid #E6E6E6;
	}

	.xd-continar .bot-price-infobox .rg-end-flex {
		margin-top: 40rpx;
		display: flex;
		padding-right: 24rpx;
		justify-content: flex-end;
	}

	.xd-continar .bot-price-infobox .bot-yh-rgflex {
		display: flex;
	}

	.xd-continar .bot-price-infobox .bot-yh-rgflex .yh-label {
		color: #666666;
		font-size: 24rpx;
	}

	.xd-continar .bot-price-infobox .bot-yh-rgflex .yh-value {
		color: #FF3333;
		font-size: 24rpx;
	}

	.xd-continar .rg-end-flebtb {
		display: flex;
		padding-right: 24rpx;
		justify-content: flex-end;
	}

	.xd-continar .rg-end-flebtb .yh-value {
		color: #666666 !important;
		font-size: 24rpx;
	}
</style>